import React, { useEffect, useState } from 'react';
import { Button, Tooltip, Tag } from 'antd';
import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
let tableListDataSource = [
    {
        "key": 0,
        "name": "学生一",
        "学位": "硕士研究生",
        "sex": "男",
        "country": "中国🇨🇳",
        "year": "2021-06",
        "class": '计算机一班',
        "研究方向": "深度学习",
        "科研成果": "SCI论文",

        "createdAt": 1652686521164,
        "memo": "简短备注文案"
    },
    {
        "key": 1,
        "name": "学生二",
        "学位": "硕士研究生",
        "sex": "男",
        "country": "中国🇨🇳",
        "year": "2021-06",
        "class": '计算机一班',
        "研究方向": "深度学习",
        "科研成果": "SCI论文",

        "createdAt": 1652686521164,
        "memo": "简短备注文案"
    },
    {
        "key": 2,
        "name": "学生三",
        "学位": "博士研究生",
        "sex": "女",
        "country": "中国🇨🇳",
        "year": "2022-06",
        "class": '计算机二班',
        "研究方向": "深度学习",
        "科研成果": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴",

        "createdAt": 1652686524888,
        "memo": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"
    },
    {
        "key": 3,
        "name": "学生四",
        "学位": "博士研究生",
        "sex": "女",
        "country": "中国🇨🇳",
        "year": "2022-06",
        "class": '计算机二班',
        "研究方向": "深度学习",
        "科研成果": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴",

        "createdAt": 1652686524888,
        "memo": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"
    },
    {
        "key": 4,
        "name": "学生五",
        "学位": "留学生",
        "sex": "女",
        "country": "俄罗斯🇷🇺",
        "year": "2022-06",
        "class": '计算机二班',
        "研究方向": "深度学习",
        "科研成果": "SCI论文",
        "联合培养国别": "英国",
        "联合培养单位": "卡迪夫大学",
        "出国时间": "2021-06",
        "回国时间": "2022-06",

        "createdAt": 1652686524888,
        "memo": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"
    },
    {
        "key": 5,
        "name": "学生六",
        "学位": "留学生",
        "sex": "女",
        "country": "法国🇫🇷",
        "year": "2022-06",
        "class": '计算机二班',
        "研究方向": "深度学习",
        "科研成果": "SCI论文",
        "联合培养国别": "英国",
        "联合培养单位": "卡迪夫大学",
        "出国时间": "2021-06",
        "回国时间": "2022-06",
        "createdAt": 1652686524888,
        "memo": "很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"
    },

]
const columns1 = [
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '学位',
        dataIndex: '学位',
        filters: true,
        onFilter: true,
        valueEnum: {
            "硕士研究生": { text: '硕士研究生', status: 'Success' },
            "博士研究生": { text: '博士研究生', color: "orange" },
            "留学生": { text: '留学生', color: "blue" },
        },
    },
    {
        title: '性别',
        dataIndex: 'sex',
        // align: 'right',
        sorter: {
            compare: (a: { sex: string }, b: { sex: string }) =>
                a.sex.localeCompare(b.sex)
        },
        valueEnum: {
            "男": { text: '男' },
            "女": { text: '女' },
        },
    },
    {
        title: '国籍',
        dataIndex: 'country',
        initialValue: 'all',
    },
    {
        title: '入学年级',
        dataIndex: 'year',
    },
    // {
    //     title: (
    //         <>
    //             创建时间
    //             <Tooltip placement="top" title="这是一段描述">
    //                 <QuestionCircleOutlined style={{ marginLeft: 4 }} />
    //             </Tooltip>
    //         </>
    //     ),
    //     width: 140,
    //     key: 'since',
    //     dataIndex: 'createdAt',
    //     valueType: 'date',
    //     sorter: (a, b) => a.createdAt - b.createdAt,
    // },
    {
        title: '班级',
        dataIndex: 'class',
        ellipsis: true,
        // copyable: true,
    },
    {
        title: '研究方向',
        dataIndex: '研究方向',
        ellipsis: true,
        render: (_) => <Tag>{_}</Tag>,
    },
    {
        title: '科研成果',
        dataIndex: '科研成果',
        ellipsis: true,
        copyable: true,
    },
    {
        title: '操作',
        key: 'option',
        valueType: 'option',
        render: () => [
            <a key="link">编辑</a>,
            <a key="link2">删除</a>,
        ],
    },

]
const columns2 = [
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '学位',
        dataIndex: '学位',
        filters: true,
        onFilter: true,
        valueEnum: {
            "硕士研究生": { text: '硕士研究生', status: 'Success' },
            "博士研究生": { text: '博士研究生', color: "orange" },
            "留学生": { text: '留学生', color: "blue" },
        },
    },
    {
        title: '性别',
        dataIndex: 'sex',
        // align: 'right',
        sorter: {
            compare: (a: { sex: string }, b: { sex: string }) =>
                a.sex.localeCompare(b.sex)
        },
        valueEnum: {
            "男": { text: '男' },
            "女": { text: '女' },
        },
    },
    {
        title: '国籍',
        dataIndex: 'country',
        // initialValue: 'all',
    },
    {
        title: '联合培养国别',
        dataIndex: '联合培养国别',
        ellipsis: true,
    },
    {
        title: '联合培养单位',
        dataIndex: '联合培养单位',
        ellipsis: true,
    },
    {
        title: '出国时间',
        dataIndex: '出国时间',
        ellipsis: true,
    },
    {
        title: '回国时间',
        dataIndex: '回国时间',
        ellipsis: true,
    },
   
    {
        title: '科研成果',
        dataIndex: '科研成果',
        ellipsis: true,
        copyable: true,
    },
    {
        title: '操作',
        key: 'option',
        valueType: 'option',
        render: () => [
            <a key="link">编辑</a>,
            <a key="link2">删除</a>,
        ],
    },

]
export default ({ tableKey }: any) => {
    console.log(tableKey);
    const data = tableListDataSource.filter((item: any) => {
        if (tableKey === "0") {
            return true
        }
        if (tableKey === "1") {
            return item.学位 === "硕士研究生"
        }
        if (tableKey === "2") {
            return item.学位 === "博士研究生"
        }
        if (tableKey === "3") {
            return item.学位 === "留学生"
        }
    })
    const headerTitle = (value: any) => {
        if (tableKey === "0") {
            return "全部学生"
        }
        if (tableKey === "1") {
            return "硕士研究生"
        }
        if (tableKey === "2") {
            return "博士研究生"
        }
        if (tableKey === "3") {
            return "留学生"
        }
    }
    return (
        <>
            {/* <Button onClick={() => {
                console.log(tableListDataSource);
            }}>测试</Button> */}
            <ProTable
                bordered
                columns={tableKey === "3" ? columns2 : columns1}
                dataSource={data}
                // request={(params, sorter, filter) => {
                //     // 表单搜索项会从 params 传入，传递给后端接口。
                //     console.log(params, sorter, filter);
                //     return Promise.resolve({
                //         data: tableListDataSource,
                //         success: true,
                //     });
                // }}
                rowKey="key"
                pagination={{
                    showQuickJumper: true,
                }}
                search={false}
                dateFormatter="string"
                headerTitle={headerTitle(tableKey)}
                toolBarRender={() => [
                    // <Button key="show">查看日志</Button>,
                    <Button key="out">
                        导出数据
                        <DownOutlined />
                    </Button>,
                    <Button type="primary" key="primary">
                        添加学生
                    </Button>,
                ]}
            />
        </>
    );
};